
<meta charset="UTF-8">

<div id="queryuser">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryUser")}}</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="primary"  @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>
        <div class="my-total">
            <span>{{$t("bgMgr.userTotal")}} : {{userTotal}}</span>
            <span>{{$t("bgMgr.groupTotal")}} : {{groupTotal}}</span>
            <span>{{$t("bgMgr.deviceTotal")}} : {{deviceTotal}}</span>
        </div>
        <div class="table-wraper">
            <i-table border :columns="columns" height="520" :data="tableData" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

        <Modal v-model="modal" width="900" title="编辑用户">
            <div style="width:850px;margin:10px auto">

                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.username")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="username" disabled></i-input>
                    </i-col>
                </Row>
            
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.userType")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="usertype">
                            <i-option v-for="item in userTypeList" :value="item.type" :key="item.type">{{ item.name }}</i-option>
                        </i-select>
                    </i-col>
                </Row>
            
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.client")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="companyid">
                            <i-option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                </Row>
            
                <Row style="margin: 10px 0" v-show="isShowGroup">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.grouping")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="groupids" multiple>
                            <i-option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">多点登陆 : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="multilogin">
                            <i-option value="1" >是</i-option>
                            <i-option value="0" >否</i-option>
                        </i-select>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;电话 : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="phone"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;QQ : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="qq"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;微信 : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="wechat"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;邮箱 : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="email"></i-input>
                    </i-col>
                </Row>
             
                <Row style="margin: 10px 0" v-show="!isShowGroup">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.groupCount")}} : &nbsp;</i-col>
                    <i-col span="3">
                        <input-number :max="20" :min="1" v-model="groupcount"></input-number>
                    </i-col>
            
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.userCount")}} : &nbsp;</i-col>
                    <i-col span="3">
                        <input-number :max="100" :min="10" v-model="usercount"></input-number>
                    </i-col>
            
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.devCount")}} : &nbsp;</i-col>
                    <i-col span="3">
                        <input-number :max="500" :min="10" v-model="devicecount"></input-number>
                    </i-col>
                </Row>
            
            
                <Row style="margin: 10px 0">
                    <i-col span="12" :offset="4">
                        <i-button style="width:100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                </Row>                
    
            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
    </div>     
    <script>
 vueInstanse = new Vue({
            el:"#queryuser",
            i18n: utils.getI18n(),
            data:{
                modal:false,
                editDeviceIndex:null,
                queryTableData:[],
                deviceTotal:'',
                userTotal:'',
                groupTotal:'',
                queryParameter:"",
                loading:true,
                total:0,
                currentIndex:1,
                columns: [
                        {
                            title:vRoot.$t("user.client"),
                            key:'companyname'
                        },
                        {
                            title: vRoot.$t("user.username"),
                            key: 'username',
                        },
                        {
                            title: vRoot.$t("user.userType"),
                            key: 'userTypeStr'    
                        },
                        {
                            title:vRoot.$t("user.groupCount"),
                            key:'usedGroupCount'
                        },
                        {
                            title:vRoot.$t("group.userCount"),  
                            key:'usedUserCount'
                        },
                        {
                            title: vRoot.$t("group.devCount"),  
                            key: 'usedDeviceCount' 
                        },
                        {
                            title:vRoot.$t("user.createTime"),
                            key: 'createtime'
                        },
                        {
                            title: vRoot.$t("bgMgr.action"),
                            key: 'action',
                            width: 250,
                            render: function(h, params) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function() {
                                                vueInstanse.editDeviceIndex = params.index;
                                                editObject = params.row;
                                                vueInstanse.queryAllCompanyInfo(vueInstanse.doQueryAllCompanyInfo);
                                            }
                                        }
                                    }, vRoot.$t("bgMgr.edit")),
                                    
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: vRoot.$t("message.confirmDel")
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'on-ok': function () {
                                                vueInstanse.handleDelete(params.row.username);
                                            }
                                        }
                                    },[
                                    h('Button', {
                                            props: {
                                            type: 'error',
                                            size: 'small'
                                            }
                                        },vRoot.$t("bgMgr.delete")) 
                                    ])  ,

                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function() {
                                                 vueInstanse.resetDevicePwd(params.index);
                                            }
                                        }
                                    }, vRoot.$t("user.resetPwd"))
                                ]);
                            }
                        }
                    ],
                    tableData: [],
                    recordsList:[],

                    username:"",
                    usertype:"",
                    singleLogin:"0",
                    phoneLogin:"0",
                    weixinLogin:"0",
                    companyid:"",
                    multilogin:"1",
                    groupcount:10,
                    devicecount:500,
                    usercount:10,
                    companyList:[],
                    groupids:[],
                    groupList:[],
                    userTypeList:[],
                    isShowGroup:false,
                    qq:"",
                    email:"",
                    phone:"",
                    wechat:""
            },
            methods:{
                handlerClickQuery () {
                    var self = this;
                    var queryTableData = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (!self.queryParameter) return;
                    this.recordsList.forEach(function (record) {
                       
                        var username = record.username,
                            companynamePinyin =record.companynamePinyin,
                            companynameFirstLetter = record.companynameFirstLetter ,
                            userTypeStrPinyin = record.userTypeStrPinyin ,
                            userTypeStrFirstLetter = record.userTypeStrFirstLetter;
    
                        if (
                            record.userTypeStr.indexOf(self.queryParameter) != -1 ||
                            (record.companyname.indexOf(self.queryParameter))  != -1 ||
                            username.toLowerCase().indexOf(queryParameterLowerCase) != -1 || 
                            companynamePinyin.indexOf(queryParameterLowerCase) != -1 ||
                            companynameFirstLetter.indexOf(queryParameterLowerCase) != -1 ||
                            userTypeStrPinyin.indexOf(queryParameterLowerCase) != -1 ||
                            userTypeStrFirstLetter.indexOf(queryParameterLowerCase) != -1 
                        ){        
                            queryTableData.push(record);
                        }
                    })

                    this.currentIndex = 1;
                    this.queryTableData = queryTableData;
                    this.tableData = this.queryTableData.slice(0,10);
                    this.total = this.queryTableData.length;
                },
                getUserInfoList:function(){
                    var url = myUrls.queryUser();
                    utils.sendAjax(url,{username:userName},this.doUserInfoList);
                },
                doUserInfoList:function(resp){
                    if(resp.status == 0 && resp.userlists != null){
                        var me = this;
                        var currdevicecount = 0;
                        var currgroupcount = 0;
                        resp.userlists.forEach(function (item) { 
                            item.usedUserCount = item.company?item.currusercount + "/" + item.usercount :"";
                            item.usedDeviceCount = item.company?item.currdevicecount + "/" + item.devicecount :"";
                            item.usedGroupCount = item.company?item.currgroupcount + "/" + item.groupcount :"";
                            item.companyname = item.company?item.company.companyname:"";
                            currdevicecount += item.company?item.currdevicecount:0;
                            currgroupcount += item.company?item.currgroupcount:0;

                            item.userTypeStr = me.getUserTypeStr(item.usertype);
                            item.createtime = me.timeToDateStr(item.createtime);

                            item.companynamePinyin = __pinyin.getPinyin(item.company&&item.company.companyname);
                            item.companynameFirstLetter = __pinyin.getFirstLetter(item.company&&item.company.companyname);
                            item.userTypeStrPinyin = __pinyin.getPinyin(item.userTypeStr);
                            item.userTypeStrFirstLetter = __pinyin.getFirstLetter(item.userTypeStr);
                        });
                        this.recordsList = resp.userlists;

                        this.tableData = this.recordsList.slice(0,10);
                        this.total = this.recordsList.length;
                        this.deviceTotal = currdevicecount;
                        this.userTotal = resp.userlists.length;
                        this.groupTotal = currgroupcount;
                    }
                    this.loading = false;
                },
                timeToDateStr:function(time){
                    return DateFormat.longToDateTimeStr(time,0);
                },
                getUserTypeStr:function(type){
                    var name = "";
                    for(var i = 0 ; i < this.userTypeDescrList.length ; i++){
                        var item = this.userTypeDescrList[i];
                        if(item.type == type){
                            name = item.name;
                            break;
                        }
                    };
                    return name;
                },
                handleDelete:function(username){
                    var me = this;
                    var url = myUrls.delUser();

                    utils.sendAjax(url,{usernames:[username]},function(resp){
                        if(resp.status == 0){
                            me.$Message.success(me.$t("message.deleteSucc"));
                            me.recordsList.forEach(function(item,index){
                                if(item.username == username){
                                    var delUserItem = me.recordsList[index];
                                    me.deviceTotal -= delUserItem.currdevicecount;
                                    me.userTotal -= 1;
                                    me.groupTotal -= delUserItem.currgroupcount;
                                    me.$delete(me.recordsList,index);
                                }
                            });
                            me.tableData.forEach(function(item,index){
                                if(item.username == username){
                                    me.$delete(me.tableData,index);
                                }
                            });   
                            me.total = me.recordsList.length;
                            me.tableData = me.recordsList.slice( me.currentIndex - 1 , 10);
                        }else{
                            me.$Message.error(resp.cause);
                        }
                        me.modal = false;
                    });     
                },
                resetDevicePwd:function(index){
                    var me = this;
                    var username = this.tableData[index].username;
                    var url = myUrls.resetUserLoginPwd();  
                    utils.sendAjax(url,{username:username},function (resp) { 
                        if(resp.status === 0){
                            me.$Message.success(me.$t("message.resetPwdTips"));
                        }else{
                            me.$Message.error("error");
                        }
                    });
                },
                queryAllCompanyInfo:function(claaback){
                    var me = this;
                    if(this.companyList.length){
                        me.setUserInfo();
                        me.modal = true;
                    }else{
                        var url = myUrls.queryCompanyByCreater();
                        utils.sendAjax(url,{},claaback)
                    }

                },
                doQueryAllCompanyInfo:function(resp){
                    var me = this;
                    if(resp.status == 0){
                        resp.records.forEach(function(item){
                            me.companyList.push({
                                label:item.companyname,
                                value:item.companyid
                            })
                        });
                        me.$nextTick(function () { 
                            me.setUserTypeByUser();
                            me.companyid = editObject.company ? editObject.company.companyid : "";
                            // me.queryAllgroupsInfo();
                        });
                        me.setUserInfo();
                        me.modal = true;
                    }
                },
                queryAllgroupsInfo:function(){
                    var url = myUrls.queryGroupByUser();
                    utils.sendAjax(url,{},this.doQueryAllgroupsInfo);
                },
                doQueryAllgroupsInfo:function(resp){
                    var me = this;
                    if(resp.grouplist && resp.status === 0 ){
                        resp.grouplist.forEach(function (group) { 
                            me.groupList.push({
                                label:group.groupname,
                                value:group.groupid
                            })
                        });
                        if(editObject.groups){
                            editObject.groups.forEach(function(item){
                                me.groupids.push(item.groupid);
                            });
                        }  
                    }
                    me.setUserInfo();
                    me.modal = true;
                },
                handleSubmit:function(){
                    var me = this;
                    var url = myUrls.editUser();
                    var userType = this.usertype;
                    var data ={
                        username:this.username,
                        usertype:userType,
                        companyid:this.companyid,
                    }

                    for(var key in data){
                        if(data.hasOwnProperty(key)){
                            if(data[key] == "" || data[key] == NaN ){
                                this.$Message.error(this.$t("message.fullComplete"));   
                                return;
                            }
                        };
                    };    
                    data.multilogin = Number(this.multilogin);
                    this.qq?data.qq=this.qq:"";
                    this.email?data.email=this.email:"";
                    this.phone?data.phone=this.phone:"";
                    this.phone?data.wechat=this.phone:"";

     

                    if(this.isShowGroup){
                        data.groupids = this.groupids;
                    }else{
                        data.groupcount = this.groupcount;
                        data.devicecount = this.devicecount;
                        data.usercount = this.usercount;
                    } 

                    utils.sendAjax(url,data,function (resp) {
                        if(resp.status == 0){
                            var newData = Object.assign(editObject,data);
                            newData.usedUserCount = newData.company?newData.currusercount + "/" + data.usercount :"";
                            newData.usedDeviceCount = newData.company?newData.currdevicecount + "/" + data.devicecount :"";
                            newData.usedGroupCount = newData.company?newData.currgroupcount + "/" + data.groupcount :"";
                            me.tableData[me.editDeviceIndex] = newData; 
                            utils.changeSingleItemData(me.recordsList,newData,'username');
                            me.$Message.success(me.$t("message.changeSucc"));
                        }else{
                            me.$Message.error(me.$t("message.changeFail"));
                        }
                    });
                },
                getGroupsList:function(){
                    var me = this; 
                    var url = myUrls.queryCompanyGroup();                        
                    utils.sendAjax(url,{companyid:this.companyid},function (resp) { 
                        me.groupList = [];
                        me.groupids = [];
                        if(resp.status == 0){
                            var companys = resp.companys
                            for(var i = 0 ; i < companys.length ; i++){
                                var item = companys[i];
                                if(item.companyid == me.companyid && item.groups != null){
                                    var groups = item.groups;
                                    groups.forEach(function(group){
                                        me.groupList.push({label:group.groupname,value:group.groupid});
                                    });                                   
                                };
                            };                          
                        }
                    });
                },
                setUserTypeByUser:function(){
                    var userType = vstore.state.userType;
                    var newArray = [
                        { "name": isZh ? "一级管理员" : 'Supervisor', "type": 1 },
                        { "name": isZh ? "二级管理员" : 'Manager', "type": 2 },
                    ];
                    if(userType == 1){
                        newArray.shift();
                    }else if(userType == 2){
                        newArray.shift();
                        newArray.shift();
                    }else if(userType >10){
                        newArray = [];
                    }
                    this.userTypeList = newArray;
                    this.usertype = editObject.usertype;    
                },
                setUserInfo:function(){
                    this.username = editObject.username;
                    this.qq = editObject.qq;
                    this.email = editObject.email;
                    this.phone = editObject.phone;
                    this.wechat = editObject.wechat;
                    this.multilogin = String(editObject.multilogin) ;
                    this.groupcount = editObject.groupcount;
                    this.devicecount = editObject.devicecount;
                    this.usercount = editObject.usercount;
                }
            },
            mixins:[mixIn],
            mounted:function(){
                this.userTypeDescrList = vstore.state.userTypeDescrList;
                this.getUserInfoList();
            }
        })
    </script>
</div>        